<template>
<div class="box">
  <el-col :span="32" >
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#e6f7ff"
       
      >
      <el-menu-item index="1" class="one">
          <span class="word">用户管理</span>
        </el-menu-item>
        <div></div>
        <el-menu-item index="2" class="one">
          <span class="word">权限管理</span>
        </el-menu-item>
        <div></div>
        <el-menu-item index="3" class="one">
          <span class="word">角色管理</span>
        </el-menu-item>
        <div></div>
        <el-menu-item index="4" class="one">
          <span class="word">字典管理</span>
        </el-menu-item>
        <div></div>
        <el-menu-item index="5" class="one">
          <span class="word two">返回</span>
        </el-menu-item>
      </el-menu>
    </el-col>
</div>
<div class="bottom">

</div>
  </template>
  
  <script lang="ts" setup>
  const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  </script>
  <style lang="less" scoped>
  @color:#3366cc;
  .bottom{
     width: 140px;
     height:506px;
     background-color:#e6f7ff;
  }
  .box{
    width: 140px;
  }
  .two{
   margin-left: 12px;
  }
 .word{
     color: @color;
     padding-left: 18px;

 }
 div{
 border: 1px white solid;    
}
.one:hover{
     background-color:#caeeff;
     font-weight: 600;
    
}
.one{
     height: 40px;
    
}

  
</style>